<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue 2 任务管理应用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .task-input {
            display: flex;
            margin-bottom: 20px;
        }
        
        .task-input input {
            flex: 1;
            padding: 8px;
            font-size: 16px;
        }
        
        .task-input button {
            padding: 8px 16px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        .filter-buttons {
            margin-bottom: 20px;
        }
        
        .filter-buttons button {
            padding: 6px 12px;
            margin-right: 5px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        
        .filter-buttons button.active {
            background-color: #4CAF50;
            color: white;
        }
        
        .task-list {
            list-style: none;
            padding: 0;
        }
        
        .task-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            border-radius: 4px;
        }
        
        .task-item.completed {
            background-color: #f9f9f9;
        }
        
        .task-checkbox {
            margin-right: 10px;
        }
        
        .task-title {
            flex: 1;
        }
        
        .task-title.completed {
            text-decoration: line-through;
            color: #888;
        }
        
        .task-actions button {
            margin-left: 5px;
            padding: 4px 8px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        
        .task-edit {
            display: flex;
            flex: 1;
        }
        
        .task-edit input {
            flex: 1;
            padding: 6px;
        }
        
        .task-edit button {
            margin-left: 5px;
            padding: 6px 12px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>任务管理应用</h1>
        
        <!-- 添加新任务 -->
        <div class="task-input">
            <input 
                type="text" 
                v-model="newTask" 
                placeholder="输入新任务"
                @keyup.enter="addTask"
            >
            <button @click="addTask">添加任务</button>
        </div>
        
        <!-- 筛选按钮 -->
        <div class="filter-buttons">
            <button 
                @click="filter = 'all'"
                :class="{ active: filter === 'all' }"
            >
                全部 ({{ tasks.length }})
            </button>
            <button 
                @click="filter = 'active'"
                :class="{ active: filter === 'active' }"
            >
                未完成 ({{ activeTasksCount }})
            </button>
            <button 
                @click="filter = 'completed'"
                :class="{ active: filter === 'completed' }"
            >
                已完成 ({{ completedTasksCount }})
            </button>
        </div>
        
        <!-- 任务列表 -->
        <ul class="task-list">
            <li 
                v-for="(task, index) in filteredTasks" 
                :key="index"
                class="task-item"
                :class="{ completed: task.completed }"
            >
                <!-- 任务显示模式 -->
                <div v-show="!task.editing" class="task-content">
                    <input 
                        type="checkbox" 
                        class="task-checkbox"
                        v-model="task.completed"
                        @change="toggleTaskCompletion(index)"
                    >
                    <span 
                        class="task-title"
                        :class="{ completed: task.completed }"
                    >
                        {{ task.title }}
                    </span>
                    <div class="task-actions">
                        <button @click="startEditing(index)">编辑</button>
                        <button @click="confirmDelete(index)">删除</button>
                    </div>
                </div>
                
                <!-- 任务编辑模式 -->
                <div v-show="task.editing" class="task-edit">
                    <input 
                        type="text" 
                        v-model="task.editTitle"
                        @keyup.enter="saveEdit(index)"
                    >
                    <button @click="saveEdit(index)">保存</button>
                    <button @click="cancelEdit(index)">取消</button>
                </div>
            </li>
        </ul>
        
        <p v-show="tasks.length === 0">暂无任务，请添加一个新任务吧！</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                newTask: '',
                tasks: [],
                filter: 'all'
            },
            computed: {
                filteredTasks() {
                    if (this.filter === 'active') {
                        return this.tasks.filter(task => !task.completed);
                    } else if (this.filter === 'completed') {
                        return this.tasks.filter(task => task.completed);
                    }
                    return this.tasks;
                },
                activeTasksCount() {
                    return this.tasks.filter(task => !task.completed).length;
                },
                completedTasksCount() {
                    return this.tasks.filter(task => task.completed).length;
                }
            },
            methods: {
                addTask() {
                    if (this.newTask.trim()) {
                        this.tasks.push({
                            title: this.newTask.trim(),
                            completed: false,
                            editing: false,
                            editTitle: ''
                        });
                        this.newTask = '';
                    }
                },
                toggleTaskCompletion(index) {
                    this.tasks[index].completed = !this.tasks[index].completed;
                },
                startEditing(index) {
                    this.tasks[index].editing = true;
                    this.tasks[index].editTitle = this.tasks[index].title;
                },
                saveEdit(index) {
                    if (this.tasks[index].editTitle.trim()) {
                        this.tasks[index].title = this.tasks[index].editTitle.trim();
                    }
                    this.tasks[index].editing = false;
                },
                cancelEdit(index) {
                    this.tasks[index].editing = false;
                },
                confirmDelete(index) {
                    if (confirm('确定要删除这个任务吗？')) {
                        this.tasks.splice(index, 1);
                    }
                }
            }
        });
    </script>
</body>
</html>